<script setup lang="ts">
import type { hotRecommendItem } from '@/types/home'
import { fullUrl } from '@/utils/common'
import { pageUrl } from '@/utils/constants'

const props = withDefaults(
  defineProps<{
    list: hotRecommendItem[]
  }>(),
  {
    list: () => [],
  },
)

// 跳转
const jumpTo = (item: hotRecommendItem) => {
  if (item.goods_id) {
    return uni.navigateTo({
      url: `${pageUrl['goods-detail']}?id=${item.goods_id}`,
    })
  }
  if (item.classify_id) {
    return uni.navigateTo({
      url: `${pageUrl['goods-list']}?classify_id=${item.classify_id}`,
    })
  }
}
</script>

<template>
  <view v-if="props.list.length > 0" class="recommend">
    <uni-section title="热卖推荐" type="line">
      <view class="section">
        <uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
          <uni-grid-item v-for="(item, index) in props.list" :key="index">
            <view class="grid-item" @tap="jumpTo(item)">
              <view class="titles">
                <text class="title ellipsis">{{ item.title }}</text>
                <text class="sub-title ellipsis">{{ item.sub_title }}</text>
              </view>
              <view class="content">
                <view class="tag-container">
                  <view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
                    <text>{{ tag }}</text>
                  </view>
                </view>
                <view>
                  <image class="image" :src="fullUrl(item.image)"></image>
                </view>
              </view>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </uni-section>
  </view>
</template>

<style lang="scss" scoped>
.recommend {
  margin-top: 10rpx;
}

.section {
  background-color: #f9f9f9;
}

.grid-item {
  margin: 0rpx 5rpx 10rpx;
  padding: 0rpx 10rpx;
  flex-direction: column;
  background-color: #fff;
}

.titles {
  display: flex;
  flex-direction: column;
  padding-bottom: 20rpx;

  .title {
    font-size: 30rpx;
    font-weight: bold;
  }

  .sub-title {
    font-size: 24rpx;
    color: #666;
    min-height: 35rpx;
    line-height: 40rpx;
  }
}
.content {
  display: flex;
  justify-content: space-between;
}
.tag-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5rpx;
}
.tag {
  display: flex;
  align-items: center;
  padding: 5rpx 15rpx;
  font-size: 20rpx;
  color: #fff;
  background-color: #ff6347;
  border-radius: 10rpx;
  border: none;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  height: 40rpx;
  max-width: 150rpx;
  margin-bottom: 10rpx;
}

.tag {
  text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.image {
  width: 150rpx;
  height: 150rpx;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
